<template>
    <div class="scene-init">
        <h3>Scene初始化</h3>
        <div class="scene-info">
            <p><strong>说明：</strong>EarthUI的地形、倾斜摄影模型、影像的加载需要使用EarthUI的封装方法去实现</p>
            <p>通过以下方式获取和操作场景对象：</p>
            <pre class="code-block">
// 创建场景对象
const tileset = xbsjEarthUi.createSceneObject("ES3DTileset");
const terrain = xbsjEarthUi.createSceneObject("ESTerrainLayer");

// 获取场景树
const sceneTree = xbsjEarthUi.getSceneTree();
            </pre>
        </div>
        <div class="scene-controls">
            <button @click="loadSuningTileset" class="load-btn">加载苏宁倾斜摄影</button>
            <button @click="loadTerrain" class="terrain-btn">加载地形</button>
            <!-- <button @click="clearScene" class="clear-btn">清空Scene</button> -->
        </div>
        <div class="scene-details">
            <p>倾斜摄影URL: http://223.244.255.52:8090/SN_3D_Tiles/SN_3D_Tiles.json</p>
            <p>地形URL: http://223.244.255.52:8090/china_11</p>
        </div>
        <div class="scene-status">
            <p>倾斜摄影状态: <span :class="tilesetStatusClass">{{ tilesetStatus }}</span></p>
            <p>地形状态: <span :class="terrainStatusClass">{{ terrainStatus }}</span></p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted } from 'vue';
import { XbsjEarthUi } from '../../../../scripts/xbsjEarthUi';
import { createSceneObjTreeItemFromJson } from '../fun';
import { getsceneObjNumfromSceneTree } from '../../../../scripts/general';

const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi;
const tilesetStatus = ref('未加载');
const tilesetStatusClass = ref('status-unknown');
const terrainStatus = ref('未加载');
const terrainStatusClass = ref('status-unknown');
let tileset: any = null;
let terrain: any = null;

const loadSuningTileset = () => {
    try {
        // 获取场景树
        const sceneTree = xbsjEarthUi.getSceneTree();
        if (!sceneTree) {
            console.error('场景树不可用');
            tilesetStatus.value = '场景树不可用';
            tilesetStatusClass.value = 'status-error';
            return;
        }

        // 判断苏宁广场模型是否已经加载
        const existingModel = sceneTree.json.root.children?.find((item: any) => {
            return item.sceneObj?.type === "ES3DTileset" && item.name?.includes("苏宁广场");
        });

        if (existingModel) {
            tilesetStatus.value = '已存在';
            tilesetStatusClass.value = 'status-success';
            console.log('苏宁广场模型已存在，无需重复加载');
            return;
        }

        tilesetStatus.value = '加载中...';
        tilesetStatusClass.value = 'status-loading';

        // 使用EarthUI方式创建倾斜摄影模型
        tileset = xbsjEarthUi.createSceneObject("ES3DTileset");
        if (tileset) {
            const sceneObjectIndex = getsceneObjNumfromSceneTree(xbsjEarthUi, "ES3DTileset");
            tileset.name = "苏宁广场" + (sceneObjectIndex + 1);
            tileset.url = "http://223.244.255.52:8090/SN_3D_Tiles/SN_3D_Tiles.json";
            tileset.position = [118.32457, 32.303468, 0];
            tileset.scale = [1, 1, 1];
            tileset.show = true;

            // 创建场景树项
            const json = JSON.parse(tileset.jsonStr);
            xbsjEarthUi.destroySceneObject(tileset);
            createSceneObjTreeItemFromJson(xbsjEarthUi, json);

            tilesetStatus.value = '加载成功';
            tilesetStatusClass.value = 'status-success';
            console.log('苏宁倾斜摄影模型加载成功');
        } else {
            tilesetStatus.value = '创建失败';
            tilesetStatusClass.value = 'status-error';
            console.error('创建倾斜摄影模型失败');
        }

    } catch (error) {
        console.error('创建倾斜摄影模型失败:', error);
        tilesetStatus.value = '创建失败';
        tilesetStatusClass.value = 'status-error';
    }
};

const removeSuningTileset = () => {
    try {
        // 获取场景树
        const sceneTree = xbsjEarthUi.getSceneTree();
        if (!sceneTree) {
            console.error('场景树不可用');
            tilesetStatus.value = '场景树不可用';
            tilesetStatusClass.value = 'status-error';
            return;
        }

        // 查找并移除苏宁广场模型
        const existingModel = sceneTree.json.root.children?.find((item: any) => {
            return item.sceneObj?.type === "ES3DTileset" && item.name?.includes("苏宁广场");
        });

        if (existingModel && sceneTree.json.root.children) {
            // 从场景树中移除
            const index = sceneTree.json.root.children.indexOf(existingModel);
            if (index > -1) {
                sceneTree.json.root.children.splice(index, 1);
                tilesetStatus.value = '已移除';
                tilesetStatusClass.value = 'status-removed';
                console.log('苏宁倾斜摄影模型已移除');
            }
        } else {
            tilesetStatus.value = '未找到';
            tilesetStatusClass.value = 'status-unknown';
        }
    } catch (error) {
        console.error('移除倾斜摄影模型失败:', error);
        tilesetStatus.value = '移除失败';
        tilesetStatusClass.value = 'status-error';
    }
};

const loadTerrain = () => {
    try {
        // 获取场景树
        const sceneTree = xbsjEarthUi.getSceneTree();
        if (!sceneTree) {
            console.error('场景树不可用');
            terrainStatus.value = '场景树不可用';
            terrainStatusClass.value = 'status-error';
            return;
        }

        // 判断地形是否已经加载
        const existingTerrain = sceneTree.json.root.children?.find((item: any) => {
            return item.sceneObj?.type === "ESTerrainLayer" && item.name?.includes("中国14级地形");
        });

        if (existingTerrain) {
            terrainStatus.value = '已存在';
            terrainStatusClass.value = 'status-success';
            console.log('地形已存在，无需重复加载');
            return;
        }

        terrainStatus.value = '加载中...';
        terrainStatusClass.value = 'status-loading';

        // 使用EarthUI方式创建地形
        terrain = xbsjEarthUi.createSceneObject("ESTerrainLayer");
        if (terrain) {
            terrain.name = "中国14级地形";
            terrain.url = "http://223.244.255.52:8090/china_11";
            terrain.index = 0;

            // 创建场景树项
            const json = JSON.parse(terrain.jsonStr);
            xbsjEarthUi.destroySceneObject(terrain);
            createSceneObjTreeItemFromJson(xbsjEarthUi, json);

            terrainStatus.value = '加载成功';
            terrainStatusClass.value = 'status-success';
            console.log('地形加载成功');
        } else {
            terrainStatus.value = '创建失败';
            terrainStatusClass.value = 'status-error';
            console.error('创建地形失败');
        }

    } catch (error) {
        console.error('加载地形失败:', error);
        terrainStatus.value = '加载失败';
        terrainStatusClass.value = 'status-error';
    }
};

const removeTerrain = () => {
    try {
        // 获取场景树
        const sceneTree = xbsjEarthUi.getSceneTree();
        if (!sceneTree) {
            console.error('场景树不可用');
            terrainStatus.value = '场景树不可用';
            terrainStatusClass.value = 'status-error';
            return;
        }

        // 查找并移除地形
        const existingTerrain = sceneTree.json.root.children?.find((item: any) => {
            return item.sceneObj?.type === "ESTerrainLayer" && item.name?.includes("中国14级地形");
        });

        if (existingTerrain && sceneTree.json.root.children) {
            // 从场景树中移除
            const index = sceneTree.json.root.children.indexOf(existingTerrain);
            if (index > -1) {
                sceneTree.json.root.children.splice(index, 1);
                terrainStatus.value = '已移除';
                terrainStatusClass.value = 'status-removed';
                console.log('地形已移除');
            }
        } else {
            terrainStatus.value = '未找到';
            terrainStatusClass.value = 'status-unknown';
        }
    } catch (error) {
        console.error('移除地形失败:', error);
        terrainStatus.value = '移除失败';
        terrainStatusClass.value = 'status-error';
    }
};

const clearScene = () => {
    try {
        // 获取场景树
        const sceneTree = xbsjEarthUi.getSceneTree();
        if (!sceneTree) {
            console.error('场景树不可用');
            tilesetStatus.value = '场景树不可用';
            tilesetStatusClass.value = 'status-error';
            terrainStatus.value = '场景树不可用';
            terrainStatusClass.value = 'status-error';
            return;
        }

        // 清空场景树
        if (sceneTree.json.root.children) {
            sceneTree.json.root.children = [];
        }
        
        tileset = null;
        terrain = null;
        
        tilesetStatus.value = 'Scene已清空';
        tilesetStatusClass.value = 'status-cleared';
        terrainStatus.value = 'Scene已清空';
        terrainStatusClass.value = 'status-cleared';
        console.log('Scene已清空');
    } catch (error) {
        console.error('清空Scene失败:', error);
        tilesetStatus.value = '清空失败';
        tilesetStatusClass.value = 'status-error';
        terrainStatus.value = '清空失败';
        terrainStatusClass.value = 'status-error';
    }
};

onMounted(() => {
    // 组件加载时检查EarthUI状态
    const sceneTree = xbsjEarthUi.getSceneTree();
    if (sceneTree) {
        tilesetStatus.value = '就绪';
        tilesetStatusClass.value = 'status-ready';
        terrainStatus.value = '就绪';
        terrainStatusClass.value = 'status-ready';
    } else {
        tilesetStatus.value = 'EarthUI不可用';
        tilesetStatusClass.value = 'status-error';
        terrainStatus.value = 'EarthUI不可用';
        terrainStatusClass.value = 'status-error';
    }
});
</script>

<style scoped>
.scene-init {
    width: 280px;
    box-sizing: border-box;
    padding: 10px;
}

.scene-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
}

.load-btn, .terrain-btn, .clear-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    width: 100%;
}

.load-btn {
    background-color: #4CAF50;
    color: white;
}

.load-btn:hover {
    background-color: #45a049;
}

.terrain-btn {
    background-color: #2196F3;
    color: white;
}

.terrain-btn:hover {
    background-color: #1976D2;
}

.clear-btn {
    background-color: #9C27B0;
    color: white;
}

.clear-btn:hover {
    background-color: #7B1FA2;
}

.scene-info {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    overflow: auto;
}

.code-block {
    background-color: #2d3748;
    color: #e2e8f0;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    overflow-x: auto;
    margin: 10px 0;
}

.scene-details {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 14px;
    overflow: auto;
}

.scene-status {
    padding: 10px;
    background-color: #000000;
    border-radius: 4px;
    border-left: 4px solid #dee2e6;
    font-size: 14px;
}

.status-unknown {
    color: #6c757d;
}

.status-ready {
    color: #17a2b8;
    font-weight: bold;
}

.status-loading {
    color: #ffc107;
    font-weight: bold;
}

.status-success {
    color: #28a745;
    font-weight: bold;
}

.status-error {
    color: #dc3545;
    font-weight: bold;
}

.status-removed {
    color: #6c757d;
    font-weight: bold;
}

.status-cleared {
    color: #17a2b8;
    font-weight: bold;
}
</style>
